<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">BookInfo Sample</a>
            </div>
            <div th:switch="${user}">
                <button th:case="null" type="button" class="btn btn-default navbar-btn navbar-right" data-toggle="modal" href="#login-modal">Sign
                    in</button>

                <p class="navbar-text navbar-right" th:case="${user}">
                    <i class="glyphicon glyphicon-user" aria-hidden="false"></i>
                    <span style="padding-left: 5px;" ><span th:text="${user}"></span> ( <a href="logout">sign out</a> )</span>
                </p>

            </div>
        </div>
    </nav>
    <div id="login-modal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Please sign in</h4>
                </div>
                <div class="modal-body">
                    <form method="post" action='login' name="login_form">
                        <p><input type="text" class="form-control" name="username" id="username" placeholder="User Name"></p>
                        <p><input type="password" class="form-control" name="passwd" placeholder="Password"></p>
                        <p>
                            <button type="submit" class="btn btn-primary">Sign in</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </p>
                    </form>
                </div>
            </div>

        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12" th:if="${product} != null">
                <h3 class="text-center text-primary" th:text="${product.getTitle()}"></h3>
                <p>Summary: <span th:text="${product.getTitle()}"></span></p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div th:if="${detailsStatus} == 200">
                    <h4 class="text-center text-primary">Book Details</h4>
                    <dl>
                        <dt>Type: <span th:text="${details.type}"></span></dt>
                        <dt>Pages:<span th:text="${details.pages}"></span></dt>
                        <dt>Publisher: <span th:text="${details.publisher}"></span></dt>
                        <dt>Language:<span th:text="${details.language}"></span></dt>
                        <dt>ISBN-10: <span th:text="${details['isbn_10']}"></span></dt>
                        <dt>ISBN-13: <span th:text="${details['isbn_13']}"></span></dt>
                    </dl>
                </div>
                <div th:if="${detailsStatus} != 200">
                    <h4 class="text-center text-primary">Error fetching product details!</h4>
                    <p th:text="${detailserror}"></p>
                </div>
            </div>
            <div class="col-md-6">
                <div th:if="${reviewsStatus} == 200">
                    <h4 class="text-center text-primary">Book Reviews</h4>
                    <blockquote th:each="review: ${reviews}">
                        <p th:text="${review.text}"></p>
                        <small th:text="${review.reviewer}"></small>
                        <div th:if="${review.rating != null}">
                            <div th:if="${review.rating['stars']!= null } " >
                                <div th:style="'color:'+${review.color}">
                                    <!-- full stars: -->
                                    <span th:each="star: ${#numbers.sequence(1, review.rating.stars)}" class="glyphicon glyphicon-star"></span>
                                    <!-- empty stars: -->
                                    <span th:each="star: ${#numbers.sequence(1, 5-review.rating.stars)}" class="glyphicon glyphicon-star-empty"></span>
                                </div>
                            </div>
                            <p th:if="${review.rating['error'] != null }"><i th:text="${review.rating.error}"></i></p>
                        </div>
                    </blockquote>
                </div>
                <p th:if="${reviewsStatus} != 200"><span th:text="${reviewserror}"></span></p>
            </div>


        </div>
    </div>
    <script type="text/javascript" th:src="@{/webjars/jquery/3.2.1/jquery.min.js/}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
</body>
</html>
